/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow 
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    Navigator,
    Image,
    View,
    DeviceEventEmitter

} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import PopularPage from './PopularPage'
import TrendingPage from './TrendingPage'
import FavoritePage from './FavoritePage'
import MyPage from './my/MyPage'
import Toast,{DURATION} from 'react-native-easy-toast'
export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'tb_popular',
        }
    }
    componentDidMount(){
        this.toast1.show('99999', DURATION.LENGTH_SHORT);
        this.listener = DeviceEventEmitter.addListener('showToast1', (text) => {
            alert(text);
            this.toast1.show(text, DURATION.LENGTH_SHORT); 
        });
    }
    componentWillUnmount(){
        if (this.listener) {
            this.listener.remove();
        }
    }

    clickView(selectedTab)
    {
        this.setState({selectedTab: selectedTab}),
        DeviceEventEmitter.emit('showToast1','到顶了1');
    }

    _renderTab(Component, selectedTab, title, renderIcon) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={{color: '#2196F3'}}
                title={title}
                renderIcon={() => <Image style={styles.image}
                                         source={renderIcon}/>}
                renderSelectedIcon={() =><Image style={[styles.image, {tintColor: '#2196F7'}]}
                                                source={renderIcon}/>}
                onPress={() =>
                    this.clickView(selectedTab)
                }>

                <Component {...this.props}/>

            </TabNavigator.Item>
        )
    }

    render() {
        return (
            <View style={styles.container}>

                <TabNavigator>
                    {this._renderTab(PopularPage,'tb_popular','最热',require('../../res/images/ic_polular.png'))}
                    {this._renderTab(TrendingPage,'tb_trending','趋势',require('../../res/images/ic_trending.png'))}
                    {this._renderTab(FavoritePage,'tb_favorite','收藏',require('../../res/images/ic_favorite.png'))}
                    {this._renderTab(MyPage,'tb_my','我的',require('../../res/images/ic_my.png'))}
                </TabNavigator>
                <Toast ref={(toast2)=>this.toast1=toast2}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        height: 26,
        width: 26,
    }
});

